<template>
    <div>
        <button @click="sendGet">发送get请求</button>
        <button @click="sendPost">发送post请求</button>
        <button @click="sendDelete">发送delete请求</button>
        <button @click="sendPut">发送put请求</button>
        <button @click="sendSimple">使用async、await简化Promise用法</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return {
            users: []
        }
    },
    methods: {
        sendGet(){
            /**
             * 查询所有
             */
            // axios.get('http://ums.tangxiaoyang.vip/api/users/list')
            //     .then(res => {
            //         // console.log(res.data)
            //         if(res.data.status === 200){
            //             let users = res.data.data
            //             console.log(users)
            //         }else{
            //             console.log(res.data.msg)
            //         }
            //     }).catch(err => {
            //         console.log(err)
            //     })

            // 通过url传参
            // axios.get('http://ums.tangxiaoyang.vip/api/users/findById?id=11278')
            //     .then(res => { 
            //         console.log(res)
            //     })

            // 通过params传参
            // axios.get('http://ums.tangxiaoyang.vip/api/users/findById', {
            //     params: {
            //         id: 11278
            //     }
            // })
            //     .then(res => { 
            //         console.log(res.data)
            //     })

            // 通过rest风格传参
            axios.get('http://ums.tangxiaoyang.vip/api/users/query/11278')
                .then(res => { 
                    console.log(res.data)
                })
        },
        sendPost(){
            axios.post('http://ums.tangxiaoyang.vip/api/users/add', {
                name: '帅哥',
                phone: '1383838438',
                address: '南京'
            }).then(res => {
                console.log(res.data)
            })
        },
        sendDelete(){
            // this.$http.delete('http://ums.tangxiaoyang.vip/api/users/remove/11278')
            //     .then(res => {
            //         console.log(res.data)
            //     })

            // 批量删除
            let ids = [11279, 11280, 11281]
            axios.delete('http://ums.tangxiaoyang.vip/api/users/removeBatch', {
                data: ids
            })
                .then(res => {
                    console.log(res.data)
                })
        },
        sendPut(){
            this.$http.put('/users/modify', {
                id: 11282,
                name: '杨平安222',
                phone: '12345678901',
                address: '万和'
            })
            .then(res => {
                if(res.data.status === 200){
                    alert('修改成功')
                }
            })
        },
        async sendSimple(){
            // 异步请求
            // this.$http.get('/users/list').then(res => {
            //     this.users = res.data.data
            //     // console.log(this.users)
            // })

            // 使用async、await将异步请求 转换为 同步请求
            var {data: res} = await this.$http.get('/users/list')
            this.users = res.data
            
            console.log(111)
            console.log(this.users)


            /**
             * 对象的解构赋值
             */
            var stu = {
                name: '张三',
                age: 18,
                sex: '男'
            }
            // var username = stu.name
            // var age = stu.age
            // var sex = stu.sex
            // var {name, age, sex} = stu
            // console.log(name, age, sex)

            var {name: username} = stu
            console.log(username)

            
        }
    }
}
</script>

<style scoped lang="less">

</style>